<template>
	<view class="main">
		<view class="header">
			<u-search height="56" bg-color="#ffffff" :show-action="false" placeholder="按城市名称查询" v-model="keyword" @change="ChangeCity"></u-search>
		</view>
		<view class="nowcity">
			<view class="Gtitle">当前城市</view>
			<view class="content">				
				<view class="item" @click="ToPage(address)">
					{{keyword?keyword:address}}
				</view>
			</view>
		</view>
		<view class="host">
			<view class="Gtitle">热门城市</view>
			<view class="content">
				<view class="item" v-for="(item,index) in host" :key="index" @click="ToPage(item)">{{item}}</view>
			</view>
		</view>
		<view class="address" v-if="!keyword">
			<u-index-list :scrollTop="scrollTop">
				<view v-show="item.item.length>0" v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item.title" />
					<view class="list-cell" v-for="(i,inde) in item.item" :key="inde"  @click="ToPage(i.name)">
						{{i.name}}
					</view>
				</view>
			</u-index-list>
		</view>
		<view class="address" v-else>
			<u-index-list :scrollTop="scrollTop">
				<view v-show="item.item.length>0" v-for="(item, index) in citys" :key="index">
					<u-index-anchor :index="item.title" />
					<view class="list-cell" v-for="(i,inde) in item.item" :key="inde"  @click="ToPage(i.name)">
						{{i.name}}
					</view>
				</view>
			</u-index-list>
		</view>
	</view>

</template>

<script>
	import city from '../../static/unit/allcity.js'
	export default {
		data() {
			return {
				address:'',//当前城市
				prev:'',//上级url
				keyword:'',//搜索关键字
				scrollTop: 0,
				indexList: [],
				citys:[],
				go:'',
				host:['北京','上海','广州','深圳','成都','重庆','天津','杭州','南京','苏州','武汉','西安'],
				type:'',
				mvId:'',
				key:''
			}
		},
		onLoad(e) {
			console.log(e)
			this.go = e.go
			this.prev = e.url
			this.address = e.address
			this.type = e.type
			this.mvId = e.moiveid
			this.key = e.key
		},
		onShow() {
			this.indexList = city
			
		},
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			ChangeCity(){
				console.log(this.keyword)
				this.address=this.keyword
				if(this.keyword){
					this.citys = this.indexList.map(item=>{
						let a = item.item.filter(i=>{
					
							return i.name==this.keyword
						})
						console.log(a);
						return {title:item.title,item:a}
					})
				}
				
			},
			ToPage(e){
				console.log(e)
				try {
				    uni.removeStorageSync('region');
					console.log('大区移除成功-------------')
				} catch (e) {
				    console.log('大区移除失败-------------')
				}
				try {
				    uni.setStorageSync('address', e);
					if(this.prev == 'index'){
						uni.switchTab({
						    url: `/pages/${this.prev}/index`
						});
					}else if(this.prev == 'Chartered'){
						uni.switchTab({
						    url: `/pages/${this.prev}/index`
						});
					}else if(this.prev == 'buyTicket'){
						uni.switchTab({
						    url: `/pages/${this.prev}/index`
						});
					}
					else{
						uni.redirectTo({
						    url: `/pages/${this.prev}/index?go=${this.go}&type=${this.type}&mvId=${this.mvId}&address=${this.prev}&key=${this.key}`
						});
					}
				} catch (e) {
				    // error
				}
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		min-height: 100vh;
		background: #F5F6F7;
		padding-top: 14rpx;
		.header{
			margin: 0 28rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #ffffff;
			padding: 0 200rpx;
		}
		.Gtitle{
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
			margin: 20rpx 0 26rpx 0;
		}
		.nowcity{
			padding: 0 30rpx;
			.content{
				.tips{
					display: flex;
					flex-direction: row;	
					justify-content: space-around;
				}
				.item{
					width: 210rpx;
					height: 62rpx;
					background: #FFFFFF;
					border: 1rpx solid #EF3C37;
					font-size: 24rpx;
					font-weight: 400;
					color: #EF3C37;
					line-height: 62rpx;
					text-align: center;
				}
			}
		}
		.host{
			padding: 0 30rpx;
			.content{
				display: flex;
				flex-wrap: wrap;
				
				.item{
					width: 210rpx;
					height: 62rpx;
					background: #FFFFFF;
					border: 1rpx solid #EEEEEE;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 62rpx;
					margin: 0 16rpx 16rpx 0;
				}
				.item:nth-child(3n){
					margin-right: 0;
				}
			}
		}
		.address{
			.list-cell {
				padding: 30rpx 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #eeeeee;
			}
		}
	}
</style>
